<template>
  <page-loading :show="pageLoading">
    <!-- 选择轮胎规格 -->
    <view class="select-tyre-container">
      <view class="select-box">
        <view class="title">该车型适配多种轮胎规格</view>

        <!-- 轮胎规格列表，单选 -->
        <view class="radio-list">
          <view v-for="(item, i) in tyreList" :key="item.id" class="item">
            <label
              class="flex flex-jc-sb flex-ai-c"
              @click="checkedClick(item, i)"
            >
              <text class="color-333 font-28">{{ item }}</text>
              <i-icon
                v-show="tyreSize === item"
                icon="icongouxuan"
                type="m"
                size="38rpx"
              ></i-icon>
              <i-icon
                v-show="tyreSize !== item"
                icon="icontuoyuan"
                size="38rpx"
                color="#999"
              ></i-icon>
            </label>
          </view>

          <!-- 手动设置规格 -->
          <view class="manually" hover-class="hover-bg-color">
            <label class="flex flex-jc-sb flex-ai-c" @click="goPage()">
              <text class="color-999 font-26">手动设置规格</text>
              <u-icon name="arrow-right" size="24rpx" color="#999"></u-icon>
            </label>
          </view>
        </view>

        <u-line class="u-line" color="#eee"></u-line>

        <!-- 问答 -->
        <view class="q-a-box">
          <view class="item-box">
            <view class="q">Q 如何知道轮胎规格？</view>

            <view class="a">
              A.在轮胎的胎侧都模刻了此轮胎的规格，下图中225/45R17 即是轮胎规格
            </view>
          </view>
        </view>
      </view>

      <!-- 按钮-下一步 -->
      <view class="btn-next" @click="goNextPage()">
        <button class="btn-bg-yellow btn">下一步</button>
      </view>
    </view>
  </page-loading>
</template>

<script>
export default {
  data() {
    return {
      tyreList: [
        // {
        //   id: 1,
        //   name: '215/60R17',
        // },
        // {
        //   id: 2,
        //   name: '225/60R17',
        // },
        // {
        //   id: 3,
        //   name: '235/55R17',
        // },
      ],
      checkedValue: '', // 选中的值
      carId: '',
      tyreSize: '',
      navigateType: 'next', //nex跳转 back返回
      pageLoading: false, //初始化加载效果
    }
  },

  onLoad(e) {
    this.carId = e.carId
    this.tyreSize = e.tyreSize ? e.tyreSize : ''
    this.checkedValue = e.tyreSize ? e.tyreSize : ''
    this.navigateType = e.type ? e.type : 'next'
    this.getList()
  },

  methods: {
    //列表
    getList() {
      this.$api.afterSales
        .getTyres({
          carId: this.carId,
          size: this.tyreSize,
        })
        .then((res) => {
          this.tyreList = res.data
          this.pageLoading = true
        })
        .catch((err) => {
          console.log(err)
          this.pageLoading = true
        })
    },

    // 勾选规格
    checkedClick(item, i) {
      this.checkedValue = item
      this.tyreSize = item
    },

    // 跳到手动设置规格页面
    goPage() {
      uni.navigateTo({
        url: '/pages_afterSales/tyre/settingTyre',
      })
    },

    // 下一步
    goNextPage() {
      // let value = JSON.stringify(this.checkedValue)
      if (this.checkedValue === '') {
        uni.showToast({ title: '请选择规格', icon: 'none' })
        return
      }
      if (this.navigateType === 'back') {
        uni.$emit('selTyre', this.checkedValue)
        uni.navigateBack()
      } else {
        uni.navigateTo({
          url: `/pages_afterSales/tyre/adaptTyre?value=${this.checkedValue}`,
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.select-tyre-container {
  padding-top: 10rpx;
  background-color: #f4f4f4;

  .select-box {
    padding: 24rpx;
    background-color: #fff;

    .title {
      height: 50rpx;
    }
  }

  // 勾选列表
  .radio-list {
    .item {
      line-height: 80rpx;
    }

    .manually {
      line-height: 90rpx;
    }
  }

  // 问答
  .q-a-box {
    .item-box {
      font-size: 26rpx;
      font-weight: 500;
      color: #666666;
      line-height: 40rpx;

      .q {
        padding: 22rpx 0;
      }
    }
  }
}

.btn-next {
  position: fixed;
  bottom: 58rpx;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 0 24rpx;

  .btn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    margin: 0;

    font-size: 32rpx;
    color: #333;
  }
}
</style>
